<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="web/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="web/js/function.js"></script>

<title>Criar Personagem</title>
<style type="text/css">
#apDiv1 {
	position:absolute;
	width:454px;
	height:221px;
	z-index:1;
	left: -227px;
	top: 79px;
	margin-left: 50%;
}
#resultado {
	position:absolute;
	left:-219px;
	top:332px;
	width:438px;
	height:99px;
	z-index:2;
	margin-left: 50%;
}
.infoClasse {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: #066;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
	$(".infoClasse").hide();
	$("#origem").html("<option>Escolha uma Especialização</option>");
	$("#btn").click(function(){
		criarPersonagem($("#nome"), $("#origem"), $("#sexo"), $("#pericia"), $("#esp"));

	});
	$("#esp").change(function(){
		setOrigem($("#esp"));
		infoClasse($("#esp"))		
		});

});

</script>

<body>
<div id="apDiv1">
Crie seu personagem para Continuar<br /><br />

  <form id="form1" name="form1" method="post" action="">
     <label for="nome"></label>
      Nome do Personagem:
      <input type="text" name="nome" id="nome" />
      <br />
      <br />
      Especialidade:
    <label for="esp"></label>
      <select name="esp" id="esp">
        <option>Guerreiro Nobre</option>
        <option>Lutador de Rua</option>
        <option>Barbaro Sobrevivente</option>
        <option>Mago Genuino</option>
        <option>Feiticeiro Ilusionista</option>
        <option>Shaman Verdejante</option>
        <option>Atirador Elite</option>
        <option>Assassino das Sombras</option>
        <option>Arqueiro do Horizonte</option>
      </select>
      <br />
      <label for="textfield2"></label>
    <br />
      Origem
      <label for="origem"></label>
      <select name="origem" id="origem" class="posicao">
</select>
      <br />
      <br />
    
 Sexo      
      <label for="sexo"></label>
    <select name="sexo" id="sexo" class="posicao">
        <option >Masculino</option>
        <option>Feminino</option>
    </select>
      <br />
      <br />
      Pericia inicial
      <label for="pericia"></label>
      <select name="pericia" id="pericia">
        <option>Esperteza</option>
        <option>Medicinais</option>
        <option>Oficios</option>
        <option>Alquimia</option>
      </select>
    <br />
    <center><input type="button" name="btn" id="btn" value="Criar" /></center>
        <br />
    
  </form>
</div>
<div id="resultado">




</div>
</body>
</html>
